<template>
  <div class="shopHeaderline">
    <!--头部查找-->
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple-dark">
          <el-input
            style="width:255px;"
            placeholder="头条标题"
            v-model="title"
            size="small">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="3" :offset="16">
        <div class="grid-content bg-purple-dark">
          <el-button type="success" size="small">批量删除</el-button>
          <el-button  @click="dialogVisible = true" type="primary" size="small">添加</el-button>
        </div>
      </el-col>
    </el-row>
    <!--动态头条表格列-->
    <el-table
      class="dyNewList"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column type="selection" width="50" align="center" class="item"></el-table-column>
      <el-table-column prop="num" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" align="center"></el-table-column>
      <el-table-column label="是否显示" width="150" align="center">
        <el-switch
          width="50"
          v-model="s"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#C0CCDA">
        </el-switch>
      </el-table-column>
      <el-table-column prop="time" label="上传时间" align="center"></el-table-column>
      <el-table-column label="排序" align="center">
        <div class="sort">1</div>
      </el-table-column>
      <el-table-column prop="handle" label="操作" align="center">
        <el-button  @click="dialogVisible = true" type="success" size="mini">编辑</el-button>
        <el-button type="info" size="mini">删除</el-button>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="paging">
      <el-pagination
        background
        :page-size="10"
        layout="total, prev, pager, next"
        :total="100">
      </el-pagination>
    </div>
    <!--模态框-->
    <div class="modal">
      <el-dialog
        width="75%"
        top="0.5vh"
        title="编辑自定义详情"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        @close="close"
        :visible.sync="dialogVisible">
        <div class="dialog-contain">
          <el-row  type="flex" class="row-bg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                <span style="color:#FF0000;padding:0 5px;">*</span>标题:
              </div>
            </el-col>
            <el-col :span="7">
              <div class="grid-content bg-purple-dark">
                <el-input v-model="pageTitle" placeholder="请输入页面名称"></el-input>
              </div>
            </el-col>
            <el-col :span="1">
              <div class="grid-content bg-purple-dark" style="padding-left:10px;line-height:35px;">
                0/30
              </div>
            </el-col>
          </el-row>

          <el-row  type="flex" class="row-bg upload">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                封面图:
              </div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <label for="upload" class="upload">点击上传</label>
                <input @change="getFile($event)" type="file" id="upload">
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-dark suggest">
                （建议宽度：750px）
              </div>
            </el-col>
          </el-row>

          <el-row  type="flex" class="row-bg effectImg">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark"></div>
            </el-col>
            <el-col :span="3">
              <div class="grid-content bg-purple-dark">
                <p class="effectImg" ref="pictureCover">
                  <img :src="pictureCover" alt="" width="165" height="119">
                </p>
              </div>
            </el-col>
          </el-row>

          <el-row  type="flex" class="row-bg detail">
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="padding-right:10px;line-height:35px;text-align: right">
                详情:
              </div>
            </el-col>
            <el-col :span="10">
              <div class="grid-content bg-purple-dark">
                <el-input
                  v-model="detail"
                  class="textarea"
                  type="textarea"
                  rows="15"
                  placeholder="请输入内容"
                  show-word-limit
                  resize="none"
                >
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
        <!--模态框底部-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保存信息</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShoppingHeaderline',
  data() {
    return {
      title: '',
      tableData: [{
        num: 1,
        title: '【超级VIP分享】听说保险和阔旗更配',
        time: '2018-09-26  11:34'
      },
      {
        num: 1,
        title: '【超级VIP分享】听说保险和阔旗更配',
        time: '2018-09-26  11:34'
      }],
      dialogVisible: false,
      pageTitle: '',
      detail: '',
      pictureCover: '',
      s: true
    }
  },
  methods: {
    getFile(e) {
      const file = e.target.files[0];
      const that = this;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function() {
        if (/image/.test(this.result)) {
          that.pictureCover = this.result;
        } else {
          alert('格式不正确，请上传图片格式');
        }
      }
    },
    save() {
      this.dialogVisible = false;
    },
    close() {
      this.pageTitle = '';
      this.pictureCover = '';
      this.detail = '';
    }
  }
}
</script>

<style lang="scss" scoped>
  .shopHeaderline{
    width:98%;
    margin-left:20px;
    margin-top:20px;
    .dyNewList{
      overflow: auto;
      margin-top:20px;
      max-height:670px;
      .sort{
        display:inline-block;
        width:80px;
        height:25px;
        line-height: 25px;
        border:1px solid #eeeeee;
      }
    }
    .paging{
      float:right;
      margin-top:20px;
    }
    .modal{
      .dialog-contain{
        .el-row{
          margin:30px 0;
        }
        .upload{
          .upload{
            display:inline-block;
            width: 110px;
            height: 36px;
            line-height: 36px;
            background-color:#F9F9F9;
            text-align: center;
            border: 1px solid #DDDDDD;
          }
          #upload{
            opacity: 0;
            width:10px;
            height:10px;
            margin-left:-110px;
          }
          .suggest{
            line-height: 36px;
            color:#FF0000;
          }
        }
        .effectImg{
          .effectImg{
            width: 165px;
            height: 119px;
            background-color: #DDDDDD;
          }
        }
        .detail{
          .textarea{
            overflow: auto;
          }
        }
      }
    }
  }
</style>
